<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name">用户</span>
            <span class="value">
               <div><el-image :src="comment.headPortrait" style="width:40px;height:40px;border-radius:50%;"></el-image></div>
                <div style="margin-left:5px;">{{comment.nickName}}</div>
            </span>
          </div>
          <div class="item h100">
            <span class="name required">评论内容</span>
            <span class="value">
                <el-input type="textarea" v-model="comment.comment" rows="4" placeholder="请输入评价内容"></el-input>
            </span>
          </div>

          <div class="item">
            <span class="name">评分</span>
            <span class="value">
                <el-rate
                  v-model="comment.scoreConvert"
                  disabled
                  show-score
                  text-color="#ff9900"
                  :score-template="comment.scoreConvert.toFixed(1)">
                </el-rate>
            </span>
          </div>

          <div class="item h100">
            <span class="name">时间</span>
            <span class="value">
              {{comment.createTime | parseTime}}
            </span>
          </div>

          <div class="item">
            <span class="name"></span>
            <span class="value">
              <el-popconfirm title="确定要修改用户的评价内容吗？" icon="el-icon-info"  icon-color="red"  @onConfirm="saveCommentInfo()" >
                <el-button slot="reference" type="primary" size="small" icon="el-icon-edit-outline" :loading="saveloading">
                    保 存
                </el-button>
              </el-popconfirm>
            </span>
          </div>
          <!--- end -->
      </div>
  </div>
</template>

<script>
import path from 'path'
import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as courseApi from '@/api/courseinfo'
import * as uploadApi from '@/api/upload'
import * as shopApi from '@/api/shop'
import draggable from 'vuedraggable'
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as fileUpload from '@/utils/fileupload'
//import * as qiniu from 'qiniu-js'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'commentEditShop',
  components: {
    draggable,
    BxImage
  },
  data() {
    return {
      saveloading:false,
      comment:{
        id:guid.empty,
        nickName:'',
        headPortrait:'',
        score:'',
        scoreConvert:0,
        comment:'',
        createTime:''
      },
      
    }
  },
  
  created() {
    var that=this;
    const id = that.$route.params && that.$route.params.id
    const token=auth.getToken();

    if(id && id!='0'){
      courseApi.getCommentInfo({id:id}).then(res=>{
         if(res.data){
            that.comment.id=res.data.id;
             that.comment.nickName=res.data.nickName;
             that.comment.headPortrait=res.data.headPortrait;
             that.comment.score=res.data.score;
             that.comment.scoreConvert=(res.data.score/10);
             that.comment.comment=res.data.comment;
             that.comment.createTime=res.data.createTime;
          console.log(that.comment)
         }
      });
    }
  },
  methods: {
    saveCommentInfo(){
        var that=this;
        if(!that.comment.comment.trim()){
          that.$message({
            message:'请填写评价内容',
            type:'danger'
          });
          return;
        }
        var data={
          id:that.comment.id,
          comment:that.comment.comment
        };
        that.saveloading=true;
        courseApi.editComment(data).then(res=>{
          if(res.data){
            that.$message({
              message:'修改成功！',
              type:'success'
            });
          }
          setTimeout(()=>{
            that.saveloading=false;
          },1000)
        }).catch(()=>{
          setTimeout(()=>{
            that.saveloading=false;
          },1000)
        })
    }
  }
}
</script>

